<script lang="ts" setup>
import DomainSource from "~/components/DomainSource.vue";
import ShopOnePrice from "~/components/ShopOnePrice.vue";
import DomainCase from "~/components/DomainCase.vue";
import AgentRule from "~/components/AgentRule.vue";

let index=ref(0);
const onChange = (i: number) => {
    index.value = i;
};
let swipers = ref([
    { title: '一口价签约店铺获得专属权益', action_desc: '立即了解', path: '' },
    { title: '超值福利礼包', action_desc: '立即抢购', path: '' },
])
const show=ref(true);
const router=useRouter()

import {ACTIVE_DOMAIN} from "~/const/Lists";
</script>
<template>
    <div class="content-box">
      <Domain></Domain>
      <IndexDomain :domains="ACTIVE_DOMAIN" :limit="7" :is-show-more="true"></IndexDomain>
      <IndexOnce></IndexOnce>
      <AgentRule></AgentRule>
    </div>
</template>
<style lang="scss" scoped>
.content-box{
  padding-bottom: 120px;
  padding-top:20px;
}
.my-carousel{
    width: 100vw;
    height: 530px;
    background-image: url(/imgs/index/banner.jpg);
}
.swiper-content{
    text-align: center;
    color: #fff;
    margin-top:30px;
}   

@keyframes move {
  0% {
    margin-left:6px;
  }
  60% {
    margin-left:16px;
  }
  100% {
    margin-left:6px;
  }
}
.item-icon{
  margin-left: 6px;
  animation: move 1.4s infinite;
  animation-delay: 0s;
  animation-timing-function: linear;
  font-family:'iconfont';
  transform:translateX(0);
}
.domain-source-box{
  width: 100%;
  padding-top: 136px;
  padding-bottom: 20px;
  background: url(~/assets/imgs/source-box-bg.png) no-repeat center top #F8F9FB;
  background-size: 100%;
  margin-top: -120px;
}
.one-price-box{
  background-color: #F8F9FB;
}
.shop-price-box{
  width: 100%;
  padding: 50px 0 35px;
  background: url(~/assets/imgs/shop-price-bg.png) no-repeat center top;
  background-size: cover;
}
.domain-case-box{
  width: 100%;
  padding: 50px 0 35px;
  background: url(~/assets/imgs/case-bg.png) no-repeat center top;
  background-size: cover;
  height: 348px;
}
</style>